<template>
  <div>
    <my-head :title="$route.query.cateName"></my-head>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="wrap">
        <!-- 排序栏 -->
        <div class="sort-wrap">
          <div
          :class="['sort-sale', {'active': order.by === 0}]"
            @click="onoffOrder(0)">
            销量
            </div>
          <div :class="['sort-price',{'active': order.by === 1} ]" @click="price">
            <span>价格</span>
            <div :class="['price', 'Upward', {'active':order.up_down === 1 && order.by === 1}]"></div>
            <div :class="['price', 'down', {'active':order.up_down === 0 && order.by === 1}]"></div>
          </div>
          <div :class="['sort-new', {'active': order.by === 2}]" @click="onoffOrder(2)">
            新品
            </div>
        </div>
        <!-- /排序栏 -->
        <van-list
          v-model="loading"
          :finished="finished"
          :offset="50"
          finished-text="我也是有底线的哦~~"
          @load="onLoad"
        >
          <item-lists :items="items"></item-lists>
        </van-list>
    </div><!-- wrop -->
    </van-pull-refresh>
  </div>
</template>

<script>
import MyHead from '../../components/MyHead.vue'
import ItemLists from './components/ItemLists.vue'
import { fetchItems } from '../../api'
export default {
  components: {
    MyHead,
    ItemLists
  },
  data: () => {
    return {
      order: {
        by: 0,
        up_down: 1
      },
      items: [],
      page: 1,
      pageSize: 5,
      /*
        loading代表是否处理上拉触底的状态 默认值是false，
        当load事件触发 自动变成true，反过来loading为true时，
        不会再触发load事件
      */
      loading: false,
      /*
        finished属性的finished代表是否已经加载到最后一页，
        当它变成true时，load事件就不会再触发了，同时列表
        下面的文案就变成了了finished-text的值
      */
      finished: false,
      /*
        下拉刷新组件 是否处于下拉刷新的状态 在下拉后自动变成true，
        变成true内容永远处于下拉状态，不会主动上去，在刷新成功后
        主动变成false结束这个状态
      */
      isLoading: false
    }
  },
  created () {
    this.fetchItems()
  },
  methods: {
    onRefresh () {
      this.page = 1
      // 列表数据清空
      this.items = []
      // 改变上拉到最后的状态
      this.finished = false
      this.fetchItems()
    },
    // 上拉触底事件
    onLoad () {
      ++this.page
      this.fetchItems()
    },
    fetchItems () {
      fetchItems({
        categoryId: this.$route.query.cateId,
        orderBy: this.orderBy,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        // 加载中状态解除
        this.loading = false
        // 下拉刷新状态解除
        this.isLoading = false
        if (res.data.code === 700) {
          // 到达最后一页 没有数据了
          this.finished = true
        }
        if (res.data.code === 0) {
          // 原有数据和新数据进行拼接（防止旧数据丢失）
          this.items = [...this.items, ...res.data.data.result]
        }
      })
    },
    price () {
      if (this.order.by !== 1) {
        this.order.by = 1
      } else {
        if (this.order.up_down === 0) {
          this.order.up_down = 1
        } else {
          this.order.up_down = 0
        }
      }
      this.page = 1
      this.items = []
      this.fetchItems()
    },
    onoffOrder (num) {
      this.order.by = num
      this.page = 1
      this.items = []
      this.fetchItems()
    }
  },
  computed: {
    orderBy () {
      let _orderBy = 'ordersDown'
      switch (this.order.by) {
        case 0:
          _orderBy = 'ordersDown'
          break
        case 1:
          if (this.order.up_down === 1) {
            _orderBy = 'priceDown'
          } else {
            _orderBy = 'priceUp'
          }
          break
        case 2:
          _orderBy = 'addedDown'
          break
      }
      return _orderBy
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding-top: 46px;
  .sort-wrap {
    background-color: #fff;
    display: flex;
    align-content: center;
    justify-content: space-around;
    line-height: 44px;
    border-bottom: 1px solid #f3f5f7;
    font-size: 14px;
    .sort-price {
      display: flex;
      position: relative;
      &.active {
        color: #f00;
      }
      .Upward {
        height: 0;
        width: 0;
        border: 4px solid transparent;
        border-bottom-color: #eee;
        position: absolute;
        right: -12px;
        top: 13px;
        &.active {
          border-bottom-color: #f00;
        }
      }
      .down {
        height: 0;
        width: 0;
        border: 4px solid transparent;
        border-bottom-color: #eee;
        position: absolute;
        right: -12px;
        bottom: 11px;
        transform: rotatex(180deg);
        &.active {
          border-bottom-color: #f00;
        }
      }
    }
     .sort-sale {
        &.active {
          color: #f00;
        }
      }
      .sort-new {
        &.active {
          color: #f00;
        }
      }
  }
}
.items-wrap{
  margin-top: 10px;
  .item{
    display: flex;
    background-color: #fff;
    border-radius: 12px;
    margin-bottom: 12px;
    .item-img{
      width: 160px;
    }
    .item-info{
      flex:1;
      padding: 0px 10px;
      .item-name{
        font-size: 16px;
        margin-top: 8px;
        color:#333;
      }
      .item-desc{
        font-size: 14px;
        line-height: 18px;
        margin: 10px 0;
        color:#333;
      }
      .item-buy{
        display: flex;
        justify-content: space-between;
        .price{
          font-size: 20px;
          color:#ff734c;
        }
      }
    }
  }
}
</style>
